<template>
	<a-card>
		<a-form layout="inline">
			<a-form-item>
				<a-select v-model="listQuery.select_value" style="width: 120px">
					<a-select-option value="全部">全部</a-select-option>
					<a-select-option value="name">姓名</a-select-option>
					<a-select-option value="workno">工号</a-select-option>
				</a-select>
			</a-form-item>
			<a-form-item><a-input-search enterButton @search="onSearch" /></a-form-item>
			<a-form-item><a-button type="primary" @click="addvisible = true">添加考生</a-button></a-form-item>
		</a-form>
		<a-divider type="vertical" />
		<a-table :columns="columns" :dataSource="tabledata" bordered rowKey="id" :pagination="false">
			<template slot="action" slot-scope="text, record, index">
				<span v-if="!record.editable"><a-button type="primary" @click="editTable(1, record.id)">编辑</a-button></span>
				<span v-else>
					<a-popconfirm title="确定保存?" @confirm="SaveEdit(1, record.id)" @cancel="SaveEdit(0, record.id)" okText="Yes" cancelText="No">
						<a-button type="danger">保存</a-button>
					</a-popconfirm>
				</span>
			</template>
			<template slot="name" slot-scope="text, record, index">
				<span v-if="!record.editable">
					<a href="javascript:;">{{ record.name }}</a>
				</span>
				<span v-else><a-input v-model="record.name" /></span>
			</template>
			<template slot="idnumber" slot-scope="text, record, index">
				<span v-if="!record.editable">
					<a href="javascript:;">{{ record.idnumber }}</a>
				</span>
				<span v-else><a-input v-model="record.idnumber" /></span>
			</template>
			<template slot="phone" slot-scope="text, record, index">
				<span v-if="!record.editable">
					<a href="javascript:;">{{ record.phone }}</a>
				</span>
				<span v-else><a-input v-model="record.phone" /></span>
			</template>
			<template slot="usertypeid" slot-scope="text, record, index">
				<span>
					<a-select :disabled="!record.editable" v-model="record.usertypeid" style="width: 120px">
						<a-select-option value="1">员工</a-select-option>
						<a-select-option value="2">劳工</a-select-option>
					</a-select>
				</span>
			</template>
		</a-table>
		<a-pagination
			showSizeChanger
			:pageSize.sync="listQuery.page_size"
			:pageSizeOptions="pagesizeoptions"
			@showSizeChange="onShowSizeChange"
			@change="onChange"
			:total="listQuery.total"
			v-model="listQuery.page_number"
		/>
		<a-modal title="添加考试" :visible="addvisible" @ok="addUser" :confirmLoading="confirmLoading" @cancel="addvisible = false">
			<a-form class="ant-advanced-search-form" :form="form">
				<a-form-item label="工号"><a-input v-decorator="['workno', { rules: [{ required: true, message: '不能为空' }] }]" /></a-form-item>
				<a-form-item label="姓名"><a-input v-decorator="['name', { rules: [{ required: true, message: '不能为空' }] }]" /></a-form-item>
				<a-form-item label="身份证"><a-input v-decorator="['idnumber', { rules: [{ required: true, validator: this.rules.idnumber }] }]" /></a-form-item>
				<a-form-item label="手机号"><a-input v-decorator="['phone', { rules: [{ required: true, validator: this.rules.phone }] }]" /></a-form-item>
				<a-form-item label="类别">
					<a-select style="width: 120px" v-decorator="['usertypeid', { rules: [{ required: true, message: '不能为空' }] }]">
						<a-select-option value="1">员工</a-select-option>
						<a-select-option value="2">劳工</a-select-option>
					</a-select>
				</a-form-item>
			</a-form>
		</a-modal>
	</a-card>
</template>
<script>
const columns = [
	{
		title: '工号',
		dataIndex: 'workno',
		sorter: (a, b) => a.workno - b.workno,
	},
	{
		title: '姓名',
		scopedSlots: { customRender: 'name' }
	},
	{
		title: '身份证号',
		scopedSlots: { customRender: 'idnumber' }
	},
	{
		title: '手机号',
		scopedSlots: { customRender: 'phone' }
	},
	{
		title: '类别',
		scopedSlots: { customRender: 'usertypeid' }
	},
	{
		title: '操作',
		dataIndex: 'display',
		key: 'x',
		scopedSlots: { customRender: 'action' },
		align: 'center'
	}
];
const rules = {
	idnumber: function(rule, value, callback) {
		var isIDCard1 = /^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$/;
		var isIDCard2 = /^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/;
		if (isIDCard1.test(value)) {
			callback();
		} else if (isIDCard2.test(value)) {
			callback();
		} else {
			callback(new Error('请输入正确的身份证号码'));
		}
	},
	phone: function(rule, value, callback) {
		var valPhone = /^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/;
		if (valPhone.test(value)) {
			callback();
		} else {
			callback(new Error('请输入正确的手机号码'));
		}
	},
	isnumber: function(rule, value, callback) {
		const reg = /^-?(0|[1-9][0-9]*)(\.[0-9]*)?$/;
		if (!isNaN(value) && reg.test(value)) {
			callback();
		} else {
			callback('只能是数字!');
		}
	}
};
import { GetUsers, UpdateUserBymodel,SaveUserBymodel } from '@/api/exam';
export default {
	data() {
		return {
			rules: rules,
			formData: {},
			addvisible: false,
			confirmLoading: false,
			columns: columns,
			tabledata: [],
			pagesizeoptions: ['20', '50', '200', '5000'],
			listQuery: {
				page_size: 20,
				page_number: 1,
				order_column: 1,
				order_dir: 'asc',
				search_value: '',
				select_value: '全部',
				total: 0
			}
		};
	},
	methods: {
		initTable() {
			GetUsers(this.listQuery).then(res => {
				this.tabledata = res.data;
				this.listQuery.total = res.recordsTotal;
			});
		},
		onSearch(value) {
			this.listQuery.search_value = value;
			this.initTable();
		},
		onShowSizeChange(current, pageSize) {
			this.listQuery.page_size = pageSize;
			this.listQuery.page_number = current;
			this.initTable();
		},onChange(current){
			this.listQuery.page_number = current;
			this.initTable();
		},
		editTable(code, key) {
			const newData = [...this.tabledata];
			const target = newData.filter(item => key === item.id)[0];
			if (target) {
				target.editable = true;
				this.tabledata = newData;
			}
		},
		SaveEdit(code, key) {
			const newData = [...this.tabledata];
			const target = newData.filter(item => key === item.id)[0];
			if (target) {
				delete target.editable;
				this.tabledata = newData;
			}
			if (code == 1) {
				console.log(target)
				//axios
				UpdateUserBymodel({ user: target }).then(res => {
					if (res.result) {
						this.$message.success('操作成功!', 2);
					} else {
						this.$message.error('操作失败!', 5);
					}
				});
			}
		},
		addUser(e) {
			e.preventDefault();
			this.form.validateFields((err, values) => {
				if (!err) {
						SaveUserBymodel({ user: values }).then(res => {
						if (res.result) {
							this.$message.success('操作成功!', 2);
						} else {
							this.$message.error('操作失败!'+res.error, 5);
						}
					});
				}
			});
		}
	},
	mounted() {
		this.initTable();
	},
	beforeCreate() {
		this.form = this.$form.createForm(this);
	}
};
</script>
<style scoped></style>
